<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Test Case (ext-table) | Fancytree</title>

	<!-- Include assets from CDN, using latest stable version -->
	<!-- (Sample file runs stand-alone, but requires an internet conenction.) -->

	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

	<link href="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css"
		rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js">
		</script>

	<!-- Include assets from local project folder -->
	<!-- (Sample uses current code and runs without an internet conenction) -->
<!--
	<script src="../../lib/jquery.js"></script>
	<script src="../../lib/jquery-ui.custom.js"></script>

	<link href="../../src/skin-win8/ui.fancytree.css" rel="stylesheet">
	<script src="../../src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
	<script src="../../src/jquery.fancytree.js"></script>
	<script src="../../src/jquery.fancytree.childcounter.js"></script>
	<script src="../../src/jquery.fancytree.clones.js"></script>
	<script src="../../src/jquery.fancytree.columnview.js"></script>
	<script src="../../src/jquery.fancytree.dnd.js"></script>
	<script src="../../src/jquery.fancytree.dnd5.js"></script>
	<script src="../../src/jquery.fancytree.edit.js"></script>
	<script src="../../src/jquery.fancytree.filter.js"></script>
	<script src="../../src/jquery.fancytree.glyph.js"></script>
	<script src="../../src/jquery.fancytree.persist.js"></script>
	<script src="../../src/jquery.fancytree.gridnav.js"></script>
	<script src="../../src/jquery.fancytree.table.js"></script>
	<script src="../../src/jquery.fancytree.themeroller.js"></script>
	<script src="../../src/jquery.fancytree.wide.js"></script>
-->
<style type="text/css">
#tree {
	width: 100%;
}
#tree tr td:nth-child(2) {
	text-align: right;
}
</style>


<script type="text/javascript">
var SOURCE = [
		{title: "Item 1", key: "node1"},
		{title: "Folder 2", folder: true, expanded: true, key: "node2",
			children: [
				{title: "Sub-item 2.1", key: "node2.1"},
				{title: "Sub-item 2.2", key: "node2.2"}
			]
		},
		{title: "Lazy", key: "node3", lazy: true}
	],
	SOURCE_2 = [
		{title: "LazyLoad result", folder: true, lazy: true}
	];

$(function(){
	// Initialize Fancytree
	$("#tree").fancytree({
		extensions: ["table", "gridnav"],
		source: SOURCE,
		// source: { url: "sample2.json" },
		checkbox: true,
		// selectMode: 3,
		// titlesTabbable: true,
		table: {
			indentation: 20,      // indent 20px per node level
			nodeColumnIdx: 2,     // render the node title into the 2nd column
			checkboxColumnIdx: 0  // render the checkboxes into the 1st column
		},
		init: function(event, data) {
		},
		lazyLoad: function(event, data) {
			data.result = SOURCE_2;
			// data.result = { url: "sample_sub.json", debugDelay: 5000 };
		},
		loadChildren: function(event, data) {
			// data.node.fixSelection3FromEndNodes();
		},
		renderColumns: function(event, data) {
			var node = data.node,
				$tdList = $(node.tr).find(">td");

			// (index #0 is rendered by fancytree by adding the checkbox)
			$tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
			// (index #2 is rendered by fancytree)
			$tdList.eq(3).text("Text " + node.key);
			$tdList.eq(4).html("<input type='input' name='ed1' value='" + node.key + "'>");
			$tdList.eq(5).html("<input type='checkbox' name='rb1' value='" + node.key + "' checked>");
			$tdList.eq(6).html("<input type='checkbox' name='rb2' value='" + node.key + "'>");
		}
	});
});
</script>

<script>
$(function(){
	$("#button1").click(function(event){
		var tree = $.ui.fancytree.getTree(),
			node = tree.getActiveNode();

		alert(tree + ", active: " + node);
	});
});
</script>

</head>

<body class="example">
	<h1>Testcase for table issue #NNN</h1>

	<p class="description">
		(TODO: optionally add a short description here...)
	</p>

	<button id="button1">Test 1</button>
	<hr>

	<!-- Add a <table> element where the tree should appear: -->
	<table id="tree">
		<colgroup>
			<col width="30px"></col>
			<col width="50px"></col>
			<col width="*"></col>
			<col width="150px"></col>
			<col width="100px"></col>
			<col width="30px"></col>
			<col width="30px"></col>
		</colgroup>
		<thead>
			<tr>
				<th></th> <th>#</th> <th>Item</th> <th>Key</th> <th>Ed1</th> <th>Rb1</th> <th>Rb2</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

</body>
</html>
